<!-- 底部导航 -->
<template>
  <div class="tabBar">
    <div class="ulbox">
      <router-link to="/">
        <Badge>
          <span class="item">首页</span>
        </Badge>
      </router-link>
      <router-link to="/myVideo">
        <Badge>
          <span class="item">分类</span>
        </Badge>
      </router-link>
      <router-link to="/message">
        <Badge :count="1">
          <span class="item">结算</span>
        </Badge>
      </router-link>
      <router-link to="/mine">
        <Badge>
          <span class="item">我的</span>
        </Badge>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入Badge组件
import Badge from "@/components/badge/";
</script>
<style scoped lang="scss">
.tabBar {
  background: #fff;
  border-top: 1px solid #eee;
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;

  .ulbox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;

    .item {
      color: rgb(201, 201, 201);
      font-size: 14px;
      display: inline-block;
      width: 36px;
      height: 36px;
    }

    .wrap {
      height: 35px;
      width: 45px;
      display: flex;
      align-items: center;
      justify-content: center;

      .redBox {
        height: 30px;
        width: 40px;
        background: red;
        font-size: 30px;
        color: #fff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .ispress {
      height: 35px !important;
      width: 45px !important;
    }
  }

  //路由激活时添加的css属性
  .router-link-active {
    .item {
      color: #000;
      font-size: 16px;
    }
  }

  .router-link-exact-active {
    .item {
      color: #000;
      font-size: 16px;
    }
  }
}

:deep(.van-badge__wrapper) {
  font-size: 18px;
}</style>
